<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>购物车</title>
		<link rel="stylesheet" href="./css/ydui.rem.css" />
		<link rel="Shortcut Icon" href="./img/favicon-20191231054058871.ico" type="image/x-icon" />
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			body,
			html,
			#app {
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
			}

			.cart-navt {
				width: 100%;
				height: 40px;
				color: #FFFFFF;
				font-size: 0.35rem;
				text-align: center;
				line-height: 40px;
				background-color: #F49518;
			}

			.mercha {
				width: 33.3%;
				/* height: 2.7rem; */
				float: left;
				position: relative;
			}

			.logs-img {
				width: 100%;
				height: 1.2rem;
				margin-top: 10px;
				margin-bottom: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.logs-img>img {
				display: block;
				max-width: 100%;
				max-height: 100%;
				background-size: cover;
			}

			/* 商品名称 */
			.goods-name {
				font-size: 0.3rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}

			.goods-price {
				font-size: 0.25rem;
				color: #F49518;
				margin-top: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}

			/* 弹出购物车 */
			.xwv_img {
				width: 1rem;
				height: 1.2rem;
				margin: 10px;
			}

			.xwv_img>img {
				display: block;
				max-width: 100%;
				max-height: 100%;
				background-size: cover;
			}

			.tanchu {
				display: flex;
			}

			/* 购物车 */
			.xiantiao {
				width: 100%;
				height: 30px;
				display: flex;
				background-color: #F3F5F7;
			}

			.xiantiao p {
				width: 100%;
				height: 30px;
				line-height: 30px;
				margin-left: 10px;
			}

			.pitch {
				flex: 0.7;
			}

			.empty {
				flex: 0.3;
				color: #9D9D9D;
				margin-left: 10px;
				text-align: center;
			}

			.info-car {
				margin-top: 10px;
			}

			.calculate {
				display: flex;
				align-items: center;
			}

			.p-name {
				font-size: 0.3rem;
				font-weight: bold;
				margin-bottom: 8px;
			}

			.p-jiage {
				font-size: 0.3rem;
				color: #EF4F4F;
				margin-right: 10px;
			}

			.x-gouwu {
				width: 95%;
				margin-left: 5%;
				margin-top: 5px;
				margin-bottom: 10px;
				display: flex;
				position: absolute;
				bottom: 0;
				left: 0;
			}

			/* 结算 */
			.gouwu-right {
				flex: 0.9;
			}

			/* 加减数量 */
			.x-sp {
				display: inline-block;
				width: 25px;
				height: 25px;
				font-size: 16px;
				border: 1px solid #E6E6E6;
				text-align: center;
				line-height: 25px;
			}

			.shuliang {
				width: 25px;
				height: 25px;
				font-size: 16px;
				line-height: 25px;
				text-align: center;
				border-top: 1px solid #E6E6E6;
				border-bottom: 1px solid #E6E6E6;
			}

			.amount {
				font-size: 14px;
				font-weight: bold;
			}

			.xwl-hangao {
				width: 100%;
			}

			.duoxuan-input {
				display: block;
				width: 15px;
				height: 15px;
				border: solid 1px #e6e6e6;
				border-radius: 15px;
			}

			/* 弹窗 */
			.popups {
				width: 80%;
				margin-left: 10%;
				padding-top: 20px;
				display: flex;
				margin-bottom: 20px;
			}

			.popups-bott {
				width: 80%;
				margin-left: 10%;
				padding-bottom: 15px;
				display: flex;
				justify-content: center;
			}

			.chengong {
				width: 25px;
				height: 40px;
				display: flex;
				align-items: center;
				margin-right: 10px;
			}

			.chengong img {
				width: 25px;
				height: 25px;
			}

			.pops-title p {
				font-size: 0.3rem;
			}

			.bott-bar {
				width: 40%;
				height: 25px;
				margin-right: 10%;
				font-size: 0.3rem;
				color: #FFFFFF;
				line-height: 25px;
				text-align: center;
				border-radius: 5px;
				background-color: #D58800;
			}

			.bott-car {
				width: 40%;
				height: 25px;
				margin-left: 10%;
				font-size: 0.3rem;
				color: #FFFFFF;
				line-height: 25px;
				text-align: center;
				border-radius: 5px;
				background-color: #D50046;
			}

			/* 底部结算 */
			.xwl-cart {
				width: 90%;
				height: 1rem;
				display: flex;
				align-items: center;
				margin-left: 5%;
				margin-right: 5%;
			}

			.heji-sp {
				font-size: 14px;
				color: #999999;
			}

			.heji-jia {
				font-size: 14px;
				color: #EF4F4F;
			}

			.settlement {
				width: 20%;
				height: 0.8rem;
				font-weight: bold;
				background-color: #F49518;
				color: #FFFFFF;
				font-size: 0.26rem;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			/* 底部购物车弹窗 */
			.x-mercha {
				width: 90%;
				margin-left: 5%;
				/* height: 2.7rem; */
				display: flex;
				border-bottom: 1px solid #E7E7E7;
				position: relative;
			}
			.x-logs-img {
				width: 20%;
				height: 1.2rem;
				margin-top: 10px;
				margin-bottom: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.x-logs-img>img {
				display: block;
				max-width: 100%;
				max-height: 100%;
				background-size: cover;
			}
			.x-xwl-hangao{
				width: 50%;
			}
			/* 商品名称 */
			.x-goods{
				padding-bottom: 43px;
				padding-top: 32px;
			}
			.x-goods-name {
				font-size: 0.3rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: left;
				margin-top: 16px;
			}
			
			.x-goods-price {
				font-size: 0.25rem;
				color: #E61B30;
				margin-top: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: left;
			}
			.x-shangping{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			/* 加减数量 */
			.x-x-sp{
				display: inline-block;
				width: 25px;
				height: 25px;
				font-size: 16px;
				border: 1px solid #E6E6E6;
				text-align: center;
				line-height: 25px;
			}
			.x-shuliang{
				width: 25px;
				height: 25px;
				font-size: 16px;
				line-height: 25px;
				text-align: center;
				border-top: 1px solid #E6E6E6;
				border-bottom: 1px solid #E6E6E6;
			}
			/* 取消弹窗 */
			.cancel{
				width: 100%;
				height: 32px;
				position: fixed;
				top: 0;
				left: 0;
				border-bottom: 1px solid #E0E0E0;
				background-color: #FFFFFF;
				z-index: 999;
				text-align: right;
			}
			.cancel>img{
				width: 22px;
				height: 22px;
				margin-top: 5px;
				margin-right: 10px;
			}
			/* 删除 */
			.delete{
				display: flex;
				align-items: center;
				padding-left: 10px;
			}
			.delete >img{
				width: 20px;
				height: 20px;
			}
			/* 购物车为空 */
			.emptycar{
				width: 100px;
				height: 0.6rem; 
				background-color: #F49518;
				font-size: 0.3rem; 
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="cart-navt">
				<span>锦建丰购物车</span>
			</div>
			<!-- 商品选项卡 -->
			<yd-tab active-color="#F49518" style="padding-bottom: 1.2rem;">
				<!-- 全部 -->
				<yd-tab-panel :label="username">
					<div class="goods">
						<div class="mercha" v-for="(item,index) in items" :key="index">
							<div class="logs-img">
								<img :src="item.picture" />
							</div>
							<div class="xwl-hangao">
								<p class="goods-name">{{item.name}}</p>
								<p class="goods-price">￥{{item.price}}</p>
							</div>
							<div style="display: flex;align-items: center;justify-content: center;" @click="trade(item)">
								<yd-icon name="shopcart-outline" slot="icon" size="0.4rem" style="color: #F49518;"></yd-icon>
							</div>
						</div>
						<!-- 骨架锁 -->
						<div v-for="site in 10" v-show="Frame_lock" style="display: flex;">
							<div v-for="sites in 3" style="width: 33.3%; padding-top: 10px; display: flex;justify-content: center;">
								<div>
									<p style="width: 50px;height: 50px;background-color: #EFEFEF; border-radius: 50px; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
								</div>
							</div>
						</div>
					</div>
				</yd-tab-panel>
				<!-- 饮料 -->
				<yd-tab-panel :label="beverages">
					<div class="goods">
						<div class="mercha" v-for="(drink,index1) in drinks" :key="index1">
							<div class="logs-img">
								<img :src="drink.picture" />
							</div>
							<div class="xwl-hangao">
								<p class="goods-name">{{drink.name}}</p>
								<p class="goods-price">￥{{drink.price}}</p>
							</div>
							<div style="display: flex;align-items: center;justify-content: center;" @click="trade_yin(drink)">
								<yd-icon name="shopcart-outline" slot="icon" size="0.4rem" style="color: #F49518;"></yd-icon>
							</div>
						</div>
						<!-- 骨架锁 -->
						<div v-for="site in 10" v-show="Frame_lock" style="display: flex;">
							<div v-for="sites in 3" style="width: 33.3%; padding-top: 10px; display: flex;justify-content: center;">
								<div>
									<p style="width: 50px;height: 50px;background-color: #EFEFEF; border-radius: 50px; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
								</div>
							</div>
						</div>
					</div>
				</yd-tab-panel>
				<!-- 零食 -->
				<yd-tab-panel :label="snacks">
					<div class="goods">
						<div class="mercha" v-for="(socks,index) in sock" :key="index">
							<div class="logs-img">
								<img :src="socks.picture" />
							</div>
							<div class="xwl-hangao">
								<p class="goods-name">{{socks.name}}</p>
								<p class="goods-price">￥{{socks.price}}</p>
							</div>
							<div style="display: flex;align-items: center;justify-content: center;" @click="trade_lin(socks)">
								<yd-icon name="shopcart-outline" slot="icon" size="0.4rem" style="color: #F49518;"></yd-icon>
							</div>
						</div>
						<!-- 骨架锁 -->
						<div v-for="site in 10" v-show="Frame_lock" style="display: flex;">
							<div v-for="sites in 3" style="width: 33.3%; padding-top: 10px; display: flex;justify-content: center;">
								<div>
									<p style="width: 50px;height: 50px;background-color: #EFEFEF; border-radius: 50px; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
								</div>
							</div>
						</div>
					</div>
				</yd-tab-panel>
				<!-- 旅游路线 -->
				<yd-tab-panel :label="tourism">
					<div class="goods">
						<div class="mercha" v-for="(travels,index) in travel" :key="index">
							<div class="logs-img">
								<img :src="travels.picture" />
							</div>
							<div class="xwl-hangao">
								<p class="goods-name">{{travels.name}}</p>
								<p class="goods-price">￥{{travels.price}}</p>
							</div>
							<div style="display: flex;align-items: center;justify-content: center;" @click="trade_lv(travels)">
								<yd-icon name="shopcart-outline" slot="icon" size="0.4rem" style="color: #F49518;"></yd-icon>
							</div>
						</div>
						<!-- 骨架锁 -->
						<div v-for="site in 10" v-show="Frame_lock" style="display: flex;">
							<div v-for="sites in 3" style="width: 33.3%; padding-top: 10px; display: flex;justify-content: center;">
								<div>
									<p style="width: 50px;height: 50px;background-color: #EFEFEF; border-radius: 50px; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
									<p style="width: 50px;height: 15px;background-color: #EFEFEF; margin: 5px 10px 5px 10px;">
									</p>
								</div>
							</div>
						</div>
					</div>
				</yd-tab-panel>
				<!-- 弹窗 -->
				<yd-popup v-model="show1" position="center" width="80%">
					<div style="background-color:#fff;border-radius: 5px;">
						<div class="popups">
							<div class="chengong">
								<img src="img/succeed.png" />
							</div>
							<div class="pops-title">
								<p style="margin-bottom: 5px;">添加成功！</p>
								<p>商品已成功加入购物车~</p>
							</div>
						</div>
						<div class="popups-bott">
							<p @click="browse" class="bott-bar">再逛逛</p>
							<!-- <p @click="gocar" class="bott-car">去购物车</p> -->
						</div>
					</div>
				</yd-popup>
			</yd-tab>
			<!-- 回到顶部 -->
			<yd-backtop></yd-backtop>
			<!-- 底部导航 -->
			<yd-tabbar fixed>
				<!-- 结算 -->
				<div style="width: 100%;">
					<div class="xwl-cart">
						<div style="width: 80%;height: 100%;display: flex;align-items: center;" @click="details">
							<div style="padding-right: 10px;">
								<yd-icon name="shopcart" slot="icon" size="0.54rem" style="color: #F49518;"></yd-icon>
								<yd-badge slot="badge" type="danger">{{message}}</yd-badge>
							</div>
							<p>
								<span class="heji-sp">查看订单详情</span>
								<!-- <span class="heji-jia">￥0.00</span> -->
							</p>
						</div>
						<!-- <p class="settlement">去结算</p> -->
					</div>
				</div>
				<!-- <yd-tabbar-item title="首页" link="shoping_cart.html" active type="a">
					<yd-icon name="home" slot="icon" size="0.54rem"></yd-icon>
				</yd-tabbar-item>
				<yd-tabbar-item title="购物车" link="cart.html" type="a">
					<yd-icon name="shopcart" slot="icon" size="0.54rem"></yd-icon>
					<yd-badge slot="badge" type="danger">{{message}}</yd-badge>
				</yd-tabbar-item>
				<yd-tabbar-item title="个人中心" link="myine.html" type="a">
					<yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon>
				</yd-tabbar-item> -->
			</yd-tabbar>
			<!-- 购物车没有货时弹窗 -->
			<yd-popup v-model="show2" position="bottom" height="60%" v-if="sujbts2.length==0">
				<div class="cancel">
					<img src="img/cancel.png" @click="cancel" />
				</div>
				<div style="padding-top: 32px;">
					<div style="display: flex; justify-content: center;padding-top: 10%;padding-bottom: 5px;">
						<img src="img/empty_car.png" style="width: 142px; height: 128px;" />
					</div>
					<p style="text-align: center;font-size: 0.3rem;color: #8A8A8A;margin-bottom: 20px;">购物车空空如也~</p>
					<p class="emptycar" @click="Visitthe">去逛逛</p>
				</div>
			</yd-popup>
			<!-- 购物车有货时弹窗 -->
			<yd-popup v-model="show2" position="bottom" height="60%" v-else>
				<div class="cancel">
					<img src="img/cancel.png" @click="cancel" />
				</div>
				<div class="x-goods">
					<div class="x-mercha" v-for="(sujbt,index) in sujbts2" :key="index">
						<div class="x-logs-img">
							<img :src="sujbt.picture" />
						</div>
						<div class="x-xwl-hangao">
							<p class="x-goods-name">{{sujbt.name}}</p>
							<p class="x-goods-price">￥{{sujbt.price}}</p>
						</div>
						<!-- 增加商品 -->
						<div class="x-shangping">
							<span class="x-x-sp" @click="append(sujbt)">+</span>
							<span class="x-shuliang">{{sujbt.amount}}</span>
							<span class="x-x-sp" @click="minus(sujbt,index)">-</span>
						</div>
						<!-- 删除 -->
						<div class="delete">
							<img src="img/delete.png" @click="deletes(index)" />
						</div>
					</div>
				</div>
				<div style="width: 100%;position: fixed; left: 0; bottom: 0; background-color: #FFFFFF;">
					<div class="xwl-cart">
						<div style="width: 80%;height: 100%;display: flex;align-items: center;" @click="details">
							<p>
								<span class="heji-sp">合计：</span>
								<span class="heji-jia">￥{{totalPrice}}</span>
							</p>
						</div>
						<p class="settlement" @click="account">去结算</p>
					</div>
				</div>
			</yd-popup>
		</div>
		<!-- 引入 Vue -->
		<script src="./js/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="./js/ydui.rem.js"></script>
		<!-- 引入rem自适应类库 -->
		<script src="./js/ydui.flexible.js"></script>
		<script src="./js/axios.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						username: "全部",
						beverages: "饮料", // 饮料
						snacks: "零食", // 零食
						tourism: "旅游路线", // 旅游
						ordercode: "1030178328", // 机器号
						items: [], // 总数据
						drinks: [], // 饮料
						sock: [], // 零食
						travel: [], // 旅游路线
						dise_name: "", // 商品名称
						dise_img: "", // 商品图片
						dise_price: "", // 商品价格
						message: 0, // 数量
						show1: false, // 弹窗
						show2: false,
						foods: [], // 商品列表
						sujbts: [],
						sujbts2: [],
						count: 0, // 数量
						Frame_lock: true, // 骨架锁
					}
				},
				filters: {

				},
				computed: {
					// 计算总价
					totalPrice() {
						var total = 0;
						for (var i = 0; i < this.sujbts2.length; i++) {
							var item = this.sujbts2[i];
							total += item.price * item.amount;
						}
						return total.toFixed(2);
					}
				},
				methods: {
					information() {
						axios({
								url: "http://shop.jjftec.com/index.php/api/index/commodity_list",
								method: "post",
								timeout: 50000,
								data: {
									jqCode: this.ordercode
								}
							})
							.then(res => {
								// console.log("请求成功" + JSON.stringify(res));
								this.Frame_lock = false;
								this.items = res.data.data;
								var array = res.data.data;
								array.forEach(item => {
									if (item.type_name == "饮料") {
										this.drinks.push(item)
									}
									if (item.type_name == "零食") {
										this.sock.push(item)
									}
									if (item.type_name == "旅游路线") {
										this.travel.push(item)
									}
									// console.log(item.type_name)
								})
							})
							.catch(e => {
								console.log("请求失败" + e);
								this.Frame_lock = true;
							});
					},
					// 点击加入购物车
					trade(item) {
						this.$set(item, "amount", 0); // 新增变量
						this.foods.push(item);
						this.show1 = true;
						let arr1 = this.unique(this.foods);

						localStorage.setItem("weekDay", JSON.stringify(arr1));
						this.sujbts.push(item);
						this.sujbts2 = this.unique(this.sujbts);
						console.log(this.sujbts2);
						this.message = arr1.length;
					},
					// 饮料
					trade_yin(drink) {
						this.$set(drink, "amount", 0); // 新增变量
						this.foods.push(drink);
						this.show1 = true;
						let arr1 = this.unique(this.foods);

						localStorage.setItem("weekDay", JSON.stringify(arr1));
						this.sujbts.push(drink);
						this.sujbts2 = this.unique(this.sujbts);
						console.log(this.sujbts2);
						this.message = arr1.length;
					},
					// 零食
					trade_lin(socks) {
						this.$set(socks, "amount", 0); // 新增变量
						this.foods.push(socks);
						this.show1 = true;
						let arr1 = this.unique(this.foods);

						localStorage.setItem("weekDay", JSON.stringify(arr1));
						this.sujbts.push(socks);
						this.sujbts2 = this.unique(this.sujbts);
						console.log(this.sujbts2);
						this.message = arr1.length;
					},
					// 旅游
					trade_lv(travels) {
						this.$set(travels, "amount", 0); // 新增变量
						this.foods.push(travels);
						this.show1 = true;
						let arr1 = this.unique(this.foods);

						localStorage.setItem("weekDay", JSON.stringify(arr1));
						this.sujbts.push(travels);
						this.sujbts2 = this.unique(this.sujbts);
						console.log(this.sujbts2);
						this.message = arr1.length;
					},
					// 过滤数组
					unique(arr) {
						const res = new Map();
						return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
					},
					// 再逛逛
					browse() {
						this.show1 = false;
					},
					// 数量加
					append(sujbt) {
						var adds = sujbt.amount++;
						if (adds >= sujbt.stock) {
							this.$dialog.toast({
								mes: '库存商品不足,不能再添加了！',
								timeout: 1500
							});
							sujbt.amount--;
						}
					},
					// 数量减
					minus(sujbt, index) {
						let ant = sujbt.amount--;
						if (ant <= 1) {
							this.$dialog.confirm({
								title: '提示',
								mes: '已是最后一件了，您确定要删除该商品吗？',
								opts: () => {
									this.sujbts2.splice(index, 1);
								}
							});
							sujbt.amount++;
						}
					},
					// 详情
					details() {
						this.show2 = true;
						this.message = 0;
					},
					// 删除
					deletes(index) {
						this.$dialog.confirm({
							title: '提示',
							mes: '您确定要删除该商品吗？',
							opts: () => {
								this.sujbts2.splice(index, 1);
							}
						});
					},
					// 关闭弹窗
					cancel() {
						this.show2 = false;
					},
					Visitthe() {
						this.show2 = false;
					},
					// 结算
					account() {
						localStorage.removeItem("weekDay"); // 删除cookies
						var arret = this.sujbts2;
						var newArr = arret.some(function(item, index, array) {
							return item.amount > 0
						});
						if (newArr == true) {
							axios({
									url: "xuwenlong",
									method: "post",
									timeout: 50000,
									data: {
										launch: this.sujbts2
									}
								}).then(res => {
									console.log("请求成功" + res)
								})
								.catch(e => {
									console.log("请求失败" + e);
								});
						} else {
							this.$dialog.toast({
								mes: '您还没有选择商品数量！',
								timeout: 1500
							});
						}
					}
				},
				created() {
					// this.sujbts = JSON.parse(localStorage.getItem("weekDay"));
					console.log(this.sujbts2)
				},
				mounted() {
					this.information();
					this.message = this.sujbts2.length;
				}
			})
		</script>
	</body>
</html>
